<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="columns"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <template #image="{row}">
        <el-image
          style="width: 100px; height: 100px"
          :src="row.productImg"
          :preview-src-list="[row.productImg]"
        />
      </template>
      <template #time="{row}">
        <p>{{ row.startDate }} - </p>
        <p>{{ row.endDate }}</p>
      </template>
      <template #approveStatusStr="{row}">
        <el-tag v-if="row.approveStatus === 0 || row.approveStatus === 1 || row.approveStatus === 5" type="success">{{ row.approveStatusStr }}</el-tag>
        <el-tag v-else-if="row.approveStatus === 2" type="warning">{{ row.approveStatusStr }}</el-tag>
        <el-tag v-else-if="row.approveStatus === 6" type="info">{{ row.approveStatusStr }}</el-tag>
        <el-tag v-else-if="row.approveStatus === -1 || row.approveStatus === 3" type="danger">{{ row.approveStatusStr }}</el-tag>
        <el-tag v-else type="info">{{ row.approveStatusStr }}</el-tag>
      </template>
      <template #handle-area>
        <el-button type="primary" @click="addHandle">发布套票</el-button>
      </template>
      <template #handle="{row }">
        <el-button type="text" size="small" @click="showDetail(row)">详情</el-button>
        <el-button v-if="row.approveStatus === -1" type="text" size="small" @click="editHandle(row)">编辑</el-button>
        <el-button v-if="row.approveStatus === 0" class="danger-text-button" type="text" size="small" @click="rollbackHandle(row)">撤回</el-button>
        <el-button v-if="row.approveStatus === 1" type="text" size="small" @click="editStatus(row)">上架</el-button>
        <el-button v-if="row.approveStatus === 5" class="danger-text-button" type="text" size="small" @click="editStatus(row)">下架</el-button>
        <el-button v-if="row.approveStatus === -1 || row.approveStatus === 1" type="text" class="danger-text-button" size="small" @click="deleteHandle(row)">删除</el-button>
      </template>
    </pf-table>
  </div>
</template>

<script>
import { getTicketList, rollbackTicket, editTicketStatus, deleteTicket } from '@/api/ticket'
import { TICKET_TYPE, TICKET_APPROVE_STATUS } from '@/utils/enum'
import { mapGetters } from 'vuex'
export default {
  name: 'TicketList',
  components: {
  },
  data() {
    return {
      form: {},
      loading: false,
      ticketTypeList: TICKET_TYPE,
      ticketStatusOptions: TICKET_APPROVE_STATUS
    }
  },
  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ]),
    columns() {
      const attrs = { 'min-width': '100px' }
      return [
        { label: '套票图片', slot: 'image', attrs: { width: '150px' }},
        { label: '套票名称', prop: 'name', attrs },
        { label: '套餐总价（元）', prop: 'retailPrice', formatter: 'money', attrs },
        { label: '套餐库存', prop: 'dailyInventory', attrs },
        { label: '有效期', slot: 'time', attrs },
        { label: '审核状态', slot: 'approveStatusStr', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '150px', fixed: 'right' }}
      ]
    },
    formItems() {
      return [
        {
          type: 'select',
          label: '套票栏目',
          prop: 'ticketColumn',
          options: this.ticketTypeList
        },
        {
          type: 'input',
          label: '套票名称',
          prop: 'name'
        },
        {
          type: 'select',
          label: '审核状态',
          prop: 'approveStatus',
          options: this.ticketStatusOptions
        },
        {
          type: 'date',
          label: '创建时间',
          prop: 'creatDateRange',
          span: 8,
          attrs: {
            type: 'datetimerange'
          }
        },
        {
          type: 'date',
          label: '有效期',
          prop: 'dateRange',
          span: 8,
          attrs: {
            type: 'datetimerange'
          }
        }
      ]
    }
  },
  created() {},
  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const [createStartTime = '', createEndTime = ''] = formQuery?.creatDateRange || []
      const [startDate = '', endDate = ''] = formQuery?.dateRange || []
      const data = {
        pageNo,
        pageSize,
        createStartTime,
        createEndTime,
        startDate,
        endDate,
        siteId: this.currentSite.id,
        ...formQuery
      }
      getTicketList(data).then(res => {
        this.loading = false
        done({ data: res.data || [], total: res.count || 0 })
      }).catch(() => {
        done({ data: [], total: 0 })
        this.loading = false
      })
    },

    // 修改状态
    editStatus(row) {
      const data = {
        id: row.id,
        status: row.approveStatus === 5 ? 6 : 5
      }
      let message = ''
      let tip = ''
      if (row.approveStatus === 5) {
        message = '确定要下架该套票吗？'
        tip = '下架成功'
      } else {
        message = '确定要上架该套票吗？'
        tip = '上架成功'
      }
      this.$confirm(message, '提示', {
        type: 'warning'
      }).then(() => {
        editTicketStatus(data).then(() => {
          this.$message.success(tip)
          this.$refs.pfTable.getTableData()
        }).catch(() => {})
      })
    },

    // 新增
    addHandle() {
      this.$router.push({
        path: '/shop/ticket/detail'
      })
    },

    // 详情
    showDetail(row) {
      this.$router.push({
        path: '/shop/ticket/detail',
        query: {
          id: row.id,
          type: 'detail'
        }
      })
    },

    // 编辑
    editHandle(row) {
      this.$router.push({
        path: '/shop/ticket/detail',
        query: {
          id: row.id,
          type: 'edit'
        }
      })
    },

    // 撤销
    rollbackHandle(row) {
      const data = {
        id: row.id
      }
      this.$confirm('确定要撤销该套票吗?', '提示', {
        type: 'warning'
      }).then(() => {
        rollbackTicket(data).then(res => {
          this.$message.success('撤销成功')
          this.$refs.pfTable.getTableData()
        }).catch(() => {})
      }).catch(() => {})
    },

    // 删除
    deleteHandle(row) {
      const data = {
        id: row.id
      }
      this.$confirm('确定删除该套票吗?', '提示', {
        type: 'warning'
      }).then(() => {
        deleteTicket(data).then(() => {
          this.$message.success('删除成功')
          this.$refs.pfTable.getTableData()
        }).catch(() => {})
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped></style>
